<template>
	<view class="screentc-box">
		<u-popup v-model="show" mode="center" height="950upx" width="638upx" border-radius="10" :closeable="true">
			<view class="screentc-box-auto">
				<view class="screen-box">
					<view class="screen">筛选</view>
					<u-picker v-model="showTime" mode="time" :params="params"></u-picker>
				</view>
				<view class="Inputtime-box">
					<view class="Inputtime">录入时间：</view>
					<view class="Timeselection">
						<view class="starttime">2021.04.13 13:09:24</view>
						<view class="crossbar">—</view>
						<view class="Endtime">结束时间</view>
					</view>
				</view>
				<view class="Studentinformation">
					<view class="StudentID">
						<u-field v-model="model.StudentID" label-width="145" label="学员ID：" :borderBottom="false" placeholder="请输入"></u-field>
					</view>
					<view class="Studentname">
						<u-field v-model="model.Studentname" label-width="145" label="联系方式：" :borderBottom="false" placeholder="请输入"></u-field>
					</view>
					<view class="contactinformation">
						<u-field v-model="model.contactinformation" label-width="145" label="录单人：" :borderBottom="false" placeholder="请输入"></u-field>
					</view>
					<view class="Intentioncourse">
						<u-form-item label="意向专业 :" label-width="145">
							<u-input v-model="model.Intentioncourse"  :border="border" :select-open="selectShow" type="select" placeholder="请选择专业课程" @click="selectShow = true"/>
						</u-form-item>
					</view>
					<view class="city">
						<u-form-item label="城市：" label-width="145">
							<u-input v-model="model.region" :border="border" :select-open="pickerShow" type="select" placeholder="请选择地区" @click="pickerShow = true"/>
						</u-form-item>
					</view>
				</view>
				<view class="Sourcesofclues">
					<view class="Sourcesofclues-text">线索来源：</view>
					<view class="Sourcesofclues-text-box">
						<view v-for="(items,indexs) in lists" :key="indexs">
							<view :class="currors == indexs ? 'clue-ch' : 'clue'" @click="getCurrors(indexs, items.names)">{{ items.names }}</view>
						</view>
					</view>
				</view>
				<view class="Submitbutton">
					<view class="ResetFilter">重置条件</view>
					<view class="confirm">确认</view>
				</view>
				<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
				<u-select mode="mutil-column-auto" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				currors: '0',
				lists:[
					{
						names: '朋友圈'
					}, 
					{
						names: '电话呼入'
					}, 
					{
						names: '电销系统'
					},
					{
						names: '知乎'
					}, 
					{
						names: '抖音'
					}, 
					{
						names: '朋友介绍'
					}
				],
				selectList: [
					{
						value: 1,
						label: '语言培训',
						children: [
							{
								value: 2,
								label: '成人英语',
								children: [
									{
										value: 3,
										label: '新概念英语'
									},
									{
										value: 4,
										label: '零基础英语'
									}
								]
							},
							{
								value: 5,
								label: '广西',
								children: [
									{
										value: 6,
										label: '南宁'
									},
									{
										value: 7,
										label: '桂林'
									}
								]
							}
						]
					},
					{
						value: 8,
						label: '设计培训',
						children: [
							{
								value: 9,
								label: '网页设计',
								children: [
									{
										value: 10,
										label: 'DW'
									}
								]
							}
						]
					}
				],
				model: {
					StudentID: '',
					Studentname: '',
					contactinformation: '',
					Intentioncourse: '',
					region: ''
				},
				rules: {
					region: [
						{
							required: true,
							message: '请选择地区',
							trigger: 'change',
						}
					],
					Intentioncourse: [
						{
							required: true,
							message: '请选择线索来源',
							trigger: 'change',
						}
					]
				},
				value: '',
				mobile: '请输入',
				type: 'text',
				border: true,
				show: false,
				required: true,
				selectShow: false,
				pickerShow: false,
				showTime: false,
				params: {}
			}
		},
		methods:{
			getOpen (){
				this.show = true
			},
			getCurrors(indexs){
				this.currors = indexs
			},
			getChick(){
				this.showTime = true
			},
			// 选择地区回调
			regionConfirm(e) {
				this.model.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			// 选择商品类型回调
			selectConfirm(e) {
				this.model.Intentioncourse = '';
				e.map((val, index) => {
					this.model.Intentioncourse += this.model.Intentioncourse == '' ? val.label : '-' + val.label;
				})
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>
<style>
	.screentc-box /deep/ .u-border-bottom:after{
		border-bottom-width: 0;
	}
	.screentc-box /deep/ .u-close--top-right{
		top: 18px;
	}
	.screentc-box /deep/ .u-form-item{
		padding: 0;
		line-height: 56upx !important;
	}
	.screentc-box /deep/ .u-input--border{
		border-radius: 0;
	}
	.screentc-box /deep/ .u-field{
		padding: 0;
		margin-top: 0 !important;
	}
	.screentc-box /deep/.u-input__input{
		min-height: 56upx !important;
	}
	.screentc-box /deep/ .uni-input-placeholder{
		color: #C6C6C6;
	}
	.screentc-box /deep/ .u-field__input-wrap{
		height: 30px;
	}
	.screentc-box /deep/ .u-mode-center-box{
		height: auto !important;
	}
</style>

<style lang="less" scoped>
	.screentc-box{}
	.screentc-box-auto{
		padding: 30upx;
	}
	.screen-box{
		display: flex;
		padding-bottom: 25upx;
		align-items: center;
		border-bottom: 3upx solid #E5E5E5;
	}
	.screen{
		font-size: 30upx;
		font-weight: bold;
		color: #333333;
	}
	.Inputtime{
		font-size: 26upx;
		font-weight: 500;
		color: #333333;
		margin: 20upx 0;
	}
	.Timeselection{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.starttime{
		width: 45%;
		height: 31px;
		line-height: 20px;
		font-size: 22upx;
		font-weight: 400;
		color: #333333;
		padding: 10upx;
		border: 1px solid #DCDCDC;
	}
	.crossbar{
		font-size: 24upx;
		font-weight: 400;
		margin: 0 15upx;
		color: #C6C6C6;
	}
	.Endtime{
		width: 45%;
		height: 31px;
		font-size: 26upx;
		font-weight: 400;
		color: #999999;
		padding: 10upx;
		border: 1px solid #DCDCDC;
	}
	.Studentinformation{
		padding-top: 20upx;
	}
	.StudentID,.Studentname,.contactinformation,.Intentioncourse,.city{
		font-size: 26upx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 20upx;
	}
	.Sourcesofclues{
		
	}
	.Sourcesofclues-text{
		font-size: 26upx;
		font-weight: 500;
		color: #333333;
	}
	.Sourcesofclues-text-box{
		margin-top: 10upx;
		display: flex;
		flex-flow: row wrap;
	}
	.clue:nth-child(1),.clue:nth-child(5){
		margin-left: 0;
	}
	.clue{
		width: 170upx;
		font-size: 26upx;
		font-weight: 400;
		color: #666666;
		margin: 10upx 20upx 10upx 0;
		padding: 10upx 20upx;
		text-align: center;
		background: rgba(238, 238, 238, 0.4);
		border-radius: 8px;
	}
	.clue-ch{
		width: 170upx;
		font-size: 26upx;
		font-weight: 400;
		color: #fff;
		margin: 10upx 20upx 10upx 0;
		padding: 10upx 20upx;
		text-align: center;
		background: #92C25B;
		border-radius: 8px;
	}
	.Submitbutton{
		display: flex;
		justify-content: space-around;
		margin-top:35upx;
	}
	.ResetFilter{
		width: 240upx;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		line-height: 64upx;
		border-radius: 10upx;
		background-color: #EEEEEE;
		color: #999999;
	}
	.confirm{
		width: 240upx;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		line-height: 64upx;
		border-radius: 10upx;
		background-color: #92C25B;
		color: #FFFFFF;
	}
</style>
